<template>
	<view class="mainbgc" v-if="pageShow">
		<view class="fixeBox">
			<view class="top">
				<view class="top-image" @click="gotoBack()" :style="{'margin-top': marginTopHeight + 'rpx'}">
				</view>
				<view class="top-message2" :style="{'margin-top': marginTopHeight + 'rpx'}">
					<view class="toptitletext">拜访门店</view>
				</view>
			</view>
		</view>
		<!-- 顶部 -->
		<view class="top-mainpadding">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="top-titletext margin_right">{{dataAll.custominfo.name}}</view>
					<view class="top-titletext margin_right" style="font-size: 26rpx;">姓名：{{dataAll.custominfo.username}}</view>
				</view>
				<view class="top-titletext">等级：{{dataAll.custominfo.customlevel.name}}</view>
			</view>
		
			<view class="flexleft2 margin_top">
				<view class="flex2">
					<view class="top-smalltext flexleft">
						<text class="margin_right">上次拜访</text>
						<!-- <view class="smallrighticon"></view> -->
					</view>
					<view class="top-strongtext">
						{{dataAll.pre_vivit_days}}
					</view>
				</view>
				<view class="flex1">
					<view class="top-smalltext flexleft">
						<text class="margin_right">上次交易</text>
						<!-- <view class="smallrighticon"></view> -->
					</view>
					<view class="top-strongtext">￥{{dataAll.pre_saleprice}}</view>
					<view class="top-strongtext">{{dataAll.pre_saleprice_days}}天前</view>
				</view>
				<view class="flex1">
					<view class="top-smalltext flexleft">
						<text class="margin_right">总欠款</text>
						<!-- <view class="smallrighticon"></view> -->
					</view>
					<view class="top-strongtext">￥{{dataAll.custominfo.qk_price}}</view>
				</view>
			</view>
			<view class="flexleft2 margin_top">
				<view class="flex2">
					<view class="top-smalltext flexleft">
						<text class="margin_right">余额</text>
						<!-- <view class="smallrighticon"></view> -->
					</view>
					<view class="top-strongtext">￥{{dataAll.custominfo.money}}</view>
				</view>
				<view class="flex1">
					<view class="top-smalltext flexleft">
						<text class="margin_right">订货单</text>
						<!-- <view class="smallrighticon"></view> -->
					</view>
					<view class="top-strongtext">{{dataAll.saleorder_num}}单</view>
				</view>
				<view class="flex1">
					<view class="top-smalltext flexleft">
						<text class="margin_right">积分</text>
						<!-- <view class="smallrighticon"></view> -->
					</view>
					<view class="top-strongtext">{{dataAll.custominfo.score}}分</view>
				</view>
			</view>
			<view class="flexleft2 margin_top">
				<view class="flex2">
					<view class="top-smalltext flexleft">
						<text class="margin_right">优惠券</text>
						<!-- <view class="smallrighticon"></view> -->
					</view>
					<view class="top-strongtext">{{dataAll.coupon_num}}张</view>
				</view>
				<view class="flex1">
					<view class="top-smalltext flexleft">
						<text class="margin_right">本月订货额</text>
						<!-- <view class="smallrighticon"></view> -->
					</view>
					<view class="flexleft">
						<view class="top-strongtext">￥{{dataAll.mouth_saleorder_price}}</view>
						<view class="flexbetween mgleft" v-show="dataAll.icon_bool==2">
							<view class="xiangxialittle"></view>
							<text class="littletxt" style="color: #FFA800;">{{dataAll.rate}}%</text>
						</view>
						<view class="flexbetween mgleft" v-show="dataAll.icon_bool==1">
							<view class="xiangshanglittle"></view>
							<text class="littletxt" style="color: #10F28D;">{{dataAll.rate}}%</text>
						</view>
					</view>
				</view>
				<view class="flex1"></view>
			</view>
		</view>
		<view class="mainpadding ffffff flexbetween">
			<view class="qiandao-box radius bgc1 flexcenter" v-if="!dataAll.visitinfo" @click="clock">
				<view>到店签到</view>
			</view>
			<!-- 已签到 判断dataAll.visitinfo是否不为null如果不为null的话证明已经进行拜访，展示已签到状态 -->
			<view class="qiandao-box radius bgc2 flexcolumn" v-if="dataAll.visitinfo">
				<view>已签到</view>
				<view class="bgc2text">{{dataAll.visitinfo.signtime | formatDate('-')}}</view>
			</view>
			<!-- 未签到展示内容 -->
			<view class="flexcolumn" v-if="!dataAll.visitinfo && mtz_image_text==''" @click="uploadImg">
				<view class="upheadimage">
					<image src="@/static/image/system/upimageicon.png" mode=""></image>
				</view>
				<view class="maincolor_text">店头拍照</view>
			</view>
			<view class="headimage" v-if="!dataAll.visitinfo && mtz_image_text" @click="uploadImg">
				<image :src="mtz_image_text" mode=""></image>
			</view>
			<!-- 已签到展示内容 -->
			<view class="headimage" v-if="dataAll.visitinfo">
				<image :src="dataAll.visitinfo.mtz_image_text" mode=""></image>
			</view>
		</view>
		<!-- 单据类型 -->
		<view class="strongtext  mainpadding">
			<text class="titletext textliner">单据类型</text>
		</view>
		<view class="mainpadding2 ffffff">
			<view class="flexleft flex_wrap">
				<view class="select-box flexcenter">
					<view class="noselect margin_box flexcenter margin_top" @click="xsclick">
						<text class="shenptext">销售单</text>
					</view>
				</view>
				<view class="select-box flexcenter">
					<view class="noselect margin_box flexcenter margin_top" @click="thclick">
						<text class="shenptext">退货单</text>
					</view>
				</view>
				<view class="select-box flexcenter">
					<view class="noselect margin_box flexcenter margin_top" @click="skclick">
						<text class="shenptext">客户结算</text>
					</view>
				</view>
				<view class="select-box flexcenter">
					<view class="noselect margin_box flexcenter margin_top" @click="ysclick">
						<text class="shenptext">预收款单</text>
					</view>
				</view>
				<view class="select-box flexcenter">
					<view class="noselect margin_box flexcenter margin_top" @click="fyzcclick">
						<text class="shenptext">费用支出</text>
					</view>
				</view>

			</view>
		</view>
		<!-- 陈列拍照 -->
		<view class="strongtext  mainpadding">
			<text class="titletext textliner">陈列拍照</text>
		</view>
		<view class="mainpadding flexleft ffffff">
			<!-- 上传图片 -->
			<view class="select-box flexcenter" v-for="(item,index) in clpz_images_text" :key="index">
				<view class="upimageicon">
					<image :src="item" mode=""></image>
				</view>
			</view>
			<view class="select-box flexcenter" v-if="clpz_images_text.length<4" @click="upclimage">
				<view class="upimageicon">
					<image src="@/static/image/system/upimageicon.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 备注内容 -->
		<view class="strongtext  mainpadding">
			<text class="titletext textliner">备注内容</text>
		</view>
		<view class="mainpadding ffffff">
			<input type="text" placeholder="请输入备注信息" v-model="notes">
		</view>
		<!-- 拜访成果 -->
		<template v-if=" dataAll.visitinfo">
			<view class="strongtext  mainpadding" v-if=" dataAll.visitinfo.customvisitresult.length">
				<text class="titletext textliner">拜访成果</text>
			</view>
			<view class="nostrongtext ffffff mainpadding" v-for="item in dataAll.visitinfo.customvisitresult" :key="item.id">
				<view class="flexbetween" @click="djhzclick(item)">
					<view>{{item.notes}}</view>
					<view class="righticon2"></view>
				</view>
			</view>
		</template>
		
		<view class="mainpadding flexbetween" v-if="dataAll.visitinfo">
			<view class="qiantui reset flexcenter" @click="visitdel">放弃拜访</view>
			<view class="qiantui greenbtn flexcenter" @click="leave">离店签退</view>
		</view>
		 <moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pageShow:false,
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				marginTopHeight:"",
				listid:"5",
				lat: "35.17466",
				lng: "109.67307",
				dataAll:{},
				mtz_image:"",//门头照
				mtz_image_text:"",//门头照
				clpz_images: [], //陈列照片
				clpz_images_text:[],//陈列照片
				notes:"",
			
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.marginTopHeight = 60;
							that.marginTopHeightTitle = 80;
						}
					});
					let brand = res.brand;
					// #ifdef MP-WEIXIN || H5
					//适配华为
					if (brand.search('HUAWEI') != -1) {
						that.marginTopHeight = 40;
						that.marginTopHeightTitle = 60;
					}
					if (brand.search('HONOR') != -1) {
						that.marginTopHeight = 60;
						that.marginTopHeightTitle = 80;
					}
					// 适配小米
					if (brand.search('Redmi') != -1) {
						that.marginTopHeight = 50;
						that.marginTopHeightTitle = 60;
					}
					if (brand.search('MI') != -1) {
						that.marginTopHeight = 70;
						that.marginTopHeightTitle = 80;
					}
					// #endif
				}
			});
		},
		onLoad(options) {
			this.listid = options.id
			// #ifdef APP-PLUS
			this.getlocation()
			// #endif
		},
		onShow() {
			this.init() //调取拜访记录详情
		},
		methods: {
			// 获取当前位置信息
			getlocation() {
				let _this = this
				console.log("获取经纬度信息")
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						let ars = res.address
						_this.address = ars.province + ars.city + ars.district + ars.street + ars.streetNum +
							ars.poiName
						_this.lat = res.latitude
						_this.lng = res.longitude
					},
					fail(err) {
						console.log(err, "定位错误信息")
					}
				});
			},
			// 拜访记录详情=>客户信息统计
			init() {
				let _this = this;
				httpRequest.request('/dhtapi/Custom/visitDetail', 'POST', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 到店签到
			clock() {
				if(this.mtz_image==""){
					httpRequest.toast("请先对店头进行拍照")
					return false
				}
				httpRequest.request('/dhtapi/Custom/visitSing', 'POST', {
					custom_id: this.listid,
					mtz_image: this.mtz_image,
					lon: this.lng,
					lat: this.lat
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					this.init()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 销售单
			xsclick() {
				if (!this.dataAll.visitinfo) {
					httpRequest.toast("请先签到")
					return false
				}
				let data = {
					id:this.dataAll.custominfo.id,//客户id
					name:this.dataAll.custominfo.name,//客户名称
					data:this.dataAll.custominfo,//客户数据
					custom_visit_id:this.dataAll.visitinfo.id,//拜访id
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/xiaoshoudd?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 退货单
			thclick() {
				if (!this.dataAll.visitinfo) {
					httpRequest.toast("请先签到")
					return false
				}
				let data = {
					id:this.dataAll.custominfo.id,//客户id
					name:this.dataAll.custominfo.name,//客户名称
					data:this.dataAll.custominfo,//客户数据
					custom_visit_id:this.dataAll.visitinfo.id,//拜访id
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/tuihuodan?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 预收款单
			ysclick() {
				if (!this.dataAll.visitinfo) {
					httpRequest.toast("请先签到")
					return false
				}
				let data = {
					id:this.dataAll.custominfo.id,//客户id
					name:this.dataAll.custominfo.name,//客户名称
					data:this.dataAll.custominfo,//客户数据
					custom_visit_id:this.dataAll.visitinfo.id,//拜访id
				}
				uni.navigateTo({
					url: '/pages/workbench/caiwu/kehuysk?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 收款单
			skclick() {
				if (!this.dataAll.visitinfo) {
					httpRequest.toast("请先签到")
					return false
				}
				let data = {
					id:this.dataAll.custominfo.id,//客户id
					name:this.dataAll.custominfo.name,//客户名称
					data:this.dataAll.custominfo,//客户数据
					custom_visit_id:this.dataAll.visitinfo.id,//拜访id
				}
				uni.navigateTo({
					url:'/pages/workbench/caiwu/kehujs?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 费用支出
			fyzcclick() {
				if (!this.dataAll.visitinfo) {
					httpRequest.toast("请先签到")
					return false
				}
				let data = {
					id:this.dataAll.custominfo.id,//客户id
					name:this.dataAll.custominfo.name,//客户名称
					data:this.dataAll.custominfo,//客户数据
					custom_visit_id:this.dataAll.visitinfo.id,//拜访id
				}
				uni.navigateTo({
					url: '/pages/workbench/caiwu/feiyongzc?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 拜访成果详情，
			djhzclick(item){
				// 1=销售单,2=销售退货单,3=费用支出,4=预收款,5=客户结算
				if(item.type==1){//销售单
					uni.navigateTo({
						url:"/pages/workbench/xiaoshou/xiaoshoudxq?id="+item.order_id
					})
				} else if(item.type==2){//销售退货单
					uni.navigateTo({
						url:"/pages/workbench/xiaoshou/tuihuodxq?id="+item.order_id
					})
				} else if(item.type==3){//费用支出
					uni.navigateTo({
						url:"/pages/workbench/caiwu/feiyongzcxq?id="+item.order_id
					})
				} else if(item.type==4){//预收款
					uni.navigateTo({
						url:"/pages/workbench/caiwu/kehuyskxq?id="+item.order_id
					})
				} else if(item.type==5){//客户结算
					uni.navigateTo({
						url:"/pages/workbench/caiwu/kehujsdetail?id="+item.order_id
					})
				}
			},
			// 放弃拜访
			visitdel(){
				this.modal.modalShow = true
				this.modal.title = "确定放弃拜访吗？"
			},
			// 离店签退
			leave(){
				this.modal.modalShow = true
				this.modal.title = "确定离店签退吗？"
			},
			modalSure() {
				if(this.modal.title == "确定放弃拜访吗？"){
					httpRequest.request('/dhtapi/Custom/cancelVisit', 'POST', {
						id: this.dataAll.visitinfo.id//拜访id
					}, false, false, true).then(res => {
						httpRequest.toast(res.msg)
						if (res.code == 1) {
							setTimeout(()=>{
								uni.navigateBack(1)
							},500)
						}
					})
				} else if(this.modal.title == "确定离店签退吗？"){
					if(!this.clpz_images.length){
						httpRequest.toast("请陈列拍照！")
						return false
					}
					httpRequest.request('/dhtapi/Custom/endVisit', 'POST', {
						id: this.dataAll.visitinfo.id,//拜访id
						mtz_image: this.dataAll.visitinfo.mtz_image,//拜访id
						clpz_images: this.clpz_images.join(),//拜访id
						notes: this.notes,//拜访id
					}, false, false, true).then(res => {
						httpRequest.toast(res.msg)
						if (res.code == 1) {
							setTimeout(()=>{
								uni.navigateBack(1)
							},500)
						}
					})
				}
				
			},
			gotoBack(){
				uni.navigateBack(1)
			},
			uploadImg() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], "1")
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			upclimage() {
				if (!this.dataAll.visitinfo) {
					httpRequest.toast("请先签到")
					return false
				}
				let _this = this;
				let upImgs = _this.clpz_images;
				let num = 4 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], "2")
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					if(upImg==1){
						this.mtz_image = res.url
						this.mtz_image_text = res.fullurl
					}else{
						this.clpz_images.push(res.url)
						this.clpz_images_text.push(res.fullurl)
					}
				}).catch(err => {});
			},
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
	}
</script>
<style lang="scss" scoped>
	.flexleft2 {
		display: flex;
		align-items: flex-start;
	}

	// 签到模块
	.qiandao-box {
		width: 300rpx;
		height: 90rpx;
	}

	.bgc1 {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #0BBDCB;
	}

	.bgc2 {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000;
		background-color: #E9EAEC;
	}

	.bgc2text {
		font-size: 22rpx;
	}

	.upheadimage {
		width: 80rpx;
		height: 80rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.maincolor_text {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.headimage {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
</style>
<style lang="scss" scoped>
	// 顶部标题内容
	.fixeBox {
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		height: 170rpx;
		/*#endif*/
		width: 100%;
	}

	.top {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 100;
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		height: 170rpx;
		/*#endif*/
		width: 100%;
		background-color: #0BBDCB;
		background-size: cover;
		display: flex;
		align-items: center;
	}

	.top-message2 {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fff;
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/* #ifdef APP-PLUS  */
		margin-top: 110rpx !important;
		/* #endif */
	}

	.toptitletext {
		width: 300rpx;
		overflow: hidden;
		/* 限制一行显示 */
		white-space: nowrap;
		/* 显示不下省略号显示 */
		text-overflow: ellipsis;
		color: #fff;
	}

	.top-image {
		position: absolute;
		left: 40rpx;
		height: 43rpx;
		width: 100rpx;
		background: url('@/static/image/system/return2.png') no-repeat;
		background-size: 20rpx 38rpx;
		/* #ifdef APP-PLUS */
		margin-top: 120rpx !important;
		/* #endif */
	}

	.right-message {
		position: absolute;
		right: 44rpx;
		height: 43rpx;
		line-height: 43rpx;
		width: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		/* #ifdef APP-PLUS */
		margin-top: 120rpx !important;
		/* #endif */
	}

	// 顶部内容
	.top-mainpadding {
		padding: 30rpx;
		background-color: #0BBDCB;
	}

	.top-titletext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.flex2 {
		flex: 1.5;
	}

	.flex1 {
		flex: 1;
	}

	.top-smalltext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #E2E2E2;
		line-height: 36rpx;
	}

	.top-strongtext {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 36rpx;
	}

	// 选择
	.select-box {
		width: 25%;
	}

	/* 未选中状态 */
	.noselect {
		font-size: 24rpx;
		font-weight: 500;
		color: #000000;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
		width: 140rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 选中状态 */
	.select {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
		width: 140rpx;
		height: 64rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #0BBDCB;
	}

	.selectimage {
		width: 28rpx;
		height: 26rpx;
		right: -5%;
	}

	// 陈列拍照
	.upimageicon {
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	// 底部按钮
	.qiantui {
		width: 45%;
		border-radius: 50rpx;
		height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.greenbtn {
		background: #0BBDCB;
	}

	.reset {
		border: 1rpx solid #0BBDCB;
		color: #0BBDCB;
	}

	.xiangxialittle {
		width: 12rpx;
		height: 20rpx;
		background-image: url("@/static/image/system/xiangxialittle.png");
		background-size: 100% 100%;
	}

	.xiangshanglittle {
		width: 12rpx;
		height: 20rpx;
		background-image: url("@/static/image/system/xiangshanglittle.png");
		background-size: 100% 100%;
	}

	.littletxt {
		font-size: 24rpx;
		font-weight: bold;
	}

	.mgleft {
		margin-left: 16rpx;
	}
	/deep/.u-modal__content__text{
		text-align: center;
	}
</style>
